<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}" media="all">
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">

    <title>添加书籍</title>
</head>
<style type="text/css">
    .input-file input[type="file"] {
        position: absolute;
        top: 0;
        right: 0;
        height: 40px;
        opacity: 0;
    }
</style>
<style type="text/css">
    .fileinput-button {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }

    .fileinput-button input {
        position: absolute;
        right: 0px;
        top: 0px;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        font-size: 300px;
    }

</style>
<body>

<div class="container pb-15" style="margin-top: 3px;margin-left: 25%">
    <!-- Example row of columns -->
    <div class="row">
        <div class="span12">
            <div class="label-div b-30 border-all pt-5 t-20" style="position: relative; padding-left: 0;">
             <form class="layui-form" th:action="@{/addBook}"
                   method="post" enctype="multipart/form-data" style="margin-left: -100px">
                 <div class="layui-form-item">
                     <div style="margin: 30px 0px 0px 10px;font-size: large;"><b>选择书籍类型</b></div>
                     <div class="layui-input-block" style="margin-left: 30px">
                            <input type="radio" name="bookType" value=1 title="古典文学" checked="checked" />
                            <input type="radio" name="bookType" value=2 title="青春文学">
                            <input type="radio" name="bookType" value=3 title="小说">
                            <input type="radio" name="bookType" value=4 title="艺术">
                            <input type="radio" name="bookType" value=5 title="文化">
                            <input type="radio" name="bookType" value=6 title="历史">
                            <input type="radio" name="bookType" value=7 title="经济">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">书籍名称</font></label>
                        <div class="layui-input-block">
                            <input type="text" name="bookName" lay-verify="bookName" autocomplete="off"
                                   placeholder="请输入5-10个字符"
                                   class="layui-input"
                                   style="height: 50px;width: 280px;">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">书籍封面</font></label>
                        <div class="layui-input-block">
                            <p>
                                <span class="btn btn-success fileinput-button">
                                    <span>上传</span>
                                        <input type="file" id="xdaTanFileImg" name="file" onchange="xmTanUploadImg(this)"
                                               accept="image/*"/>
                                </span>
                                <input class="btn btn-success fileinput-button" type="button" value="隐藏图片"
                                       onclick="document.getElementById('xmTanImg').style.display = 'none';"/>
                                <input class="btn btn-success fileinput-button" type="button" value="显示图片"
                                       onclick="document.getElementById('xmTanImg').style.display = 'block';"/>
                            </p>
                            <img id="xmTanImg"/>
                            <div id="xmTanDiv"></div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">书籍出版社</font></label>
                        <div class="layui-input-block">
                            <input type="text" name="bookPublishers" lay-verify="bookPublishers" autocomplete="off"
                                   placeholder="请输入5-12个字符"
                                   class="layui-input"
                                   style="height: 50px;width: 280px;">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">书籍作者</font></label>
                        <div class="layui-input-block">
                            <input type="text" name="bookAuthor" lay-verify="bookAuthor" autocomplete="off"
                                   placeholder="请输入2-5个字符"
                                   class="layui-input"
                                   style="height: 50px;width: 280px;">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font size="4">书籍总量</font></label>
                        <div class="layui-input-block">
                            <input type="text" name="bookAllNum" lay-verify="bookAllNum" autocomplete="off"
                                   placeholder="请输入1-4个字符"
                                   class="layui-input"
                                   style="height: 50px;width: 280px;">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"><font size="4">书籍简介</font></label>
                        <div class="layui-input-block">
                            <textarea maxlength="300" placeholder="请输入1-300个字符"
                                      name="brief" lay-verify="text" class="layui-textarea"
                                      style="width: 520px;"></textarea>
                        </div>
                    </div>
                    <br>

                    <div class="name clearfix">
                        <button class="layui-btn layui-btn-normal" type="submit"
                                style="margin-left: 280px;width: 80px" onclick="exit()" >添加</button>
                        <button type="button" class="layui-btn layui-btn-normal" onclick="exit()" style="width: 80px;">返回</button>
                    </div>
                 <br><br>
                </form>
                </span>
            </div>



        </div>
    </div>
</div>


</body>
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script type="text/javascript" th:src="@{/js/bioV4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
<script type="text/javascript" th:src="@{/js/function.js}"></script>
<script type="text/javascript" th:src="@{/js/list.js}"></script>
<script type="text/javascript" th:src="@{/js/borsertocss.js}"></script><!-- 判断在IE9以下浏览器中根据像素的不同而设置的样式 -->
<script th:src="@{/layui/dist/layui.all.js}" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        form.render();

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });
    });

</script>

<script type="text/javascript">
    var test = document.getElementById('test');
    test.addEventListener('change', function () {
        var t_files = this.files;
        var str = '';
        for (var i = 0, len = t_files.length; i &lt; len; i++) {
            console.log(t_files[i]);
            str += '&lt;a href="javascript:void(0)">' + t_files[i].name + '&lt;/a>&lt;br/>';
        }
        ;
        document.getElementById('content').innerHTML = str;
    }, false);
</script>

<script type="text/javascript">

    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];

        console.log(obj);
        console.log(file);
        console.log("file.size = " + file.size);  //file.size 单位为byte

        var reader = new FileReader();

        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

            var img = document.getElementById("xmTanImg");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
    }
</script>
<script>
    function exit() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
</script>
</html>